body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* SVG icons - start */
.salesforce-icon-svg {
    height: 5rem; fill: #0d9dda;
}

.down-icon-svg {
    height: 0.6rem; fill: #9ba3a6; display: inline-block;
}
/* SVG icons - end */

/* Header, Footer - start */
header, footer {
    background-color: #333;
    color: white;
    padding: 10px 20px;
}

footer {
    text-align: center;
    margin-top: auto;
}
/* Header, Footer - end */

/* Main content - start */
.content {
    display: flex;
}

.main-content-top-links {
    padding: 8px 25px;
    float: right;
}

.main-content-top-links a {
    text-decoration: none;
    font-weight: bold;
    color: #032d60;
    cursor: pointer;
}

.main-content-top-links a:hover {
    color: #0176d3;
}

.main-content-top-links-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    //min-width: 160px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin: 8px 0px;
}

.main-content-top-links-dropdown-content a {
    float: none;
    //color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    //text-align: left;
}

.main-content-top-links-dropdown-content a:hover {
    background-color: #ddd;
}

.main-content-top-links:hover .main-content-top-links-dropdown-content {
    display: block;
}

/* Main content - end */

/* Left navigation - start */
.nav {
    background-color: #f4f4f4;
    border-right: 1px solid #ddd;
    
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    width: 16rem;
}

.nav-header-logo {
    display: flex;
    justify-content: center;
    padding: 10px 0px 0px 0px;
}

.nav-header {
    display: flex;
    justify-content: center;
    padding: 10px 0px 10px 0px;
}

.nav-header-text {
    color: #16325c;
    font-size: 1.1rem;
}

.nav-input-search {
    padding: 0px 12px;
}

.nav-input {
    width: -webkit-fill-available;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.nav-input:focus {
    background-color: #ffffff;
    border: 1px solid #1589ee;
    outline: 0;
    box-shadow: 0 0 3px #0070D2;
}

.filter-input {
    padding: 5px 8px;
}

.filter-input-close-button {
    border: 0px;
    background-color: #f4f4f4;
    color: gray;
    font-weight: bold;
}

.filter-input-close-button:hover {
    color: #0176d3;
}

.filter-input-section {
    display: flex;
}

.filter-input-section-line-no {
    width: 55px;
}

.nav-list-section {
    overflow: hidden; 
    overflow-y: auto;
}

.nav-list {
    list-style-type: none;
    padding: 0px;
    margin: 10px 0px;
    cursor: pointer;
}

.nav-list-item {
    padding: 10px 15px 10px 15px;
    display: flex;
}

.nav-list-item-selected {
    background-color: #e9e9e9;
    font-weight: bold;
    border-left: 5px solid #4f6a92;
    padding-left: 10px;
}

.nav-list-item-hightlight, .nav-list-item:hover {
    background-color: #e9e9e9;
}

.nav-list-child-item {
    padding: 5px 15px 5px 35px;
    display: flex;
}

.nav-list-child-item-selected {
    background-color: #e9e9e9;
    font-weight: bold;
    border-left: 5px solid #4f6a92;
    padding-left: 30px;
}

.nav-list-child-item-hightlight, .nav-list-child-item:hover {
    background-color: #e9e9e9;
}

.nav-list-grand-child-item {
    padding: 5px 15px 5px 60px;
    display: flex;
}

.nav-list-grand-child-item-selected {
    background-color: #e9e9e9;
    font-weight: bold;
    border-left: 5px solid #4f6a92;
    padding-left: 55px;
}

.nav-list-grand-child-item-hightlight, .nav-list-grand-child-item:hover {
    background-color: #e9e9e9;
}

.nav-list-grand-gchild-item {
    padding: 5px 15px 5px 85px;
    display: flex;
}

.nav-list-grand-gchild-item-selected {
    background-color: #e9e9e9;
    font-weight: bold;
    border-left: 5px solid #4f6a92;
    padding-left: 80px;
}

.nav-list-grand-gchild-item-hightlight, .nav-list-grand-gchild-item:hover {
    background-color: #e9e9e9;
}

.nav-list-item-text {
    text-decoration: none;
    color: #4f6a92;
    width: 100%;
}

.nav-list-icon-div {
    //width: 5%;
}

.nav-list-icon {
    width: 7px; float: right; padding: 6px 0px 0px 0px; opacity: 0.3;
}
/* Left navigation - end */

/* Main content area */

.main-content {
    //padding: 20px;
    margin-left: 16rem;
    width: 100%;
}

.main-content-header {
    padding: 12px 0px 12px 20px;
    background-color: #f4f4f4;
}

.main-content-header-links{
    display: inline;
}

.main-content-header-text {
    font-size: 28px;
    font-weight: bold;
    color: #032d60;
}

.main-content-body {
    padding: 0px 20px 15px 20px;
}

.main-content-body-header-text {
    font-size: 21px;
    font-weight: bold;
    margin: 20px 0px 5px 0px;
    color: #413c3c;
}

.main-content-body-heading-text {
    font-size: 20px;
    margin: 20px 0px 10px 0px;
    color: #413c3c;
}

.main-content-body-detail-text {
    font-size: 16px;
    margin: 10px 0px 10px 0px;
    color: #413c3c;
}

p {
    margin: 0px;
}

pre {
    margin: 0px;
}
/* Table styles */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0px;
    font-size: 0.9rem;    
}

/* Table styles - start */
table, th, td {
    border: 1px solid #ddd;
    color: #413c3c;
}

td {
    word-break: break-word;
}

th, td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

th {
    background-color: #f4f4f4;
}

/* Table styles - end */

/* Popup content - start */
.code_content_popup-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    //display: flex;
    //justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    z-index: 1000;
}

.code_content_popup-button-section {
    justify-self: end;
    padding-right: 2%;
}

.code_content_popup-box {
    background-color: white;
    //padding: 15px;
    border-radius: 5px;
    //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    width: 100%;
    max-width: 95%;
    max-height: 95%;
    overflow: auto;
}

.code_content_popup-box-section {
    padding: 0px 10px 10px 10px;
}
/* Popup content - end */

/* Code content styles - start */
.code-content {
    margin: 10px 0px 25px 0px;
}

.code-content-button-section {
    //display: flex; justify-content: right;
    justify-self: right;
    position: absolute;
}

.code-content-button {
    //justify-self: right;
    //position: absolute;
    background-color: #1990b8;
    opacity: 0.8;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 3px 10px;
    cursor: pointer;
    margin: 0px 1px;
}

.code-content-button:hover {
    background-color: #0176d3;
}

.code-content-close-button {
    opacity: 0.8;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 3px 10px;
    cursor: pointer;
    margin: 0px 1px;
    background-color: gray;
    color: white;
    border: 1px solid;
}

.code-content-close-button:hover {
    box-shadow: 0px 0px 4px 0px white;
}

.code-content-detail-section {
    display: flex; border-radius: 2px; border: 1px solid #ddd;
    //max-height: 400px;
    //overflow-y: auto;
}

.code-content-bg-color {
    //background-color: #f4faff;
    background-color: #f4faffb3;
}

.code-content-index-section {
    //width: 2.6rem;
    //max-width: 2.6rem;
    //border-left: 10px solid lightblue;
    //border-radius: 3px;
}

.code-content-index {
    justify-content: right; display: flex; padding: 5px 10px 3px 15px; border-right: 0.5px solid;
    border-left: 10px solid lightblue;
    //border-radius: 3px;
}

.code-content-index-text {
    font-size: 0.8rem;
    color: rgb(153, 153, 153);
}

.code-content-detail-subsection {
    width: 100%;
    display: grid;
}

.code-content-detail {
    padding: 2px 10px 2px 10px; 
    font-family: monospace;
}

.code-content-detail-text {
    font-size: 0.9rem;
    color: #323437f2;
}
/* Code content styles - end */

/* Code content output styles - start */
.code-content-output-section {
    background-color: #f4f4f4; border: 1px solid #ddd; border-radius: 2px; padding: 6px 15px; margin: 5px 0px 0px 0px;
}

/*.code-content-output {}*/
.code-content-output-text {
    color: #413c3c;
}

/* Code content output styles - end */

/* Code content notes styles - start */
.code-content-notes-section {
    background-color: #fffcdd; 
    border: 1px solid #ddd; 
    border-radius: 2px; 
    padding: 6px 15px; 
    margin: 5px 0px 0px 0px;
}

/*.code-content-notes-header {}*/
/*.code-content-notes-header-text {}*/

.code-content-notes-list {
    list-style-type:disc;
    padding: 2px 15px;
    margin: 0px;
}

.code-content-notes-list-text {
    font-size: 0.9rem;
}

/* Code content notes styles - end */

/* tab content styles - start */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  border-radius: 2px;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 20px;
  transition: 0.3s;
  font-size: 14px;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    //background-color: #ccc;
    border-bottom: 2px solid #0d9dda;
    padding-bottom: 2px;
}

/* tab content styles - end */

/*links content styles - start*/
.links-content {
    background-color: #f4f4f4; border: 1px solid #ddd; border-radius: 2px; padding: 10px 15px;
}

.links-content-header-section {
    padding-bottom: 8px;
}

.links-content-header-text {
    font-weight:bold; color: gray;
}

.links-content-details-section {
    display: flex;
}

.links-content-details-subsection {
    padding: 4px 0px; 
    width:25%;
}

.links-content-details-text {
    text-decoration: none; color: gray;
}

.links-content-details-text:hover {
    text-decoration: underline;
}
/*links content styles - end*/

.hide {
    display: none;
}

.footer-content {
    display: flex;
    margin-left: 16rem;
    text-align: center;
    justify-content: center;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    font-size: 14px;
}

.linked-in {
    font-weight: bold; 
    text-decoration: none; 
    cursor: pointer; 
    color: white; 
    font-size: 16px; 
    margin-left: 80px;
    border: 1px solid white;
    padding: 0px 3px;
    border-radius: 2px;
}


/* color styles - start*/
.code-text-voilet {
    color: rgb(119, 0, 136);
}

.code-text-blue {
    color: rgb(0, 0, 255);
}

.code-text-orange {
    color: rgb(170, 85, 0);
}

.code-text-link {
    text-decoration: none;
    color: rgb(1, 118, 211);
}
.code-text-link:hover {
    text-decoration: underline;
}
/* color styles - end*/


/* Home Page styles - start*/
.home-page-blog-posts {
    display: flex;
    margin-top: 25px;
}

.home-page-blog-post {
    border-top: 6px solid #4f6a92;
    margin: 0px 10px 0px 10px;
    width: 30%;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 5px;
    background: #f4f4f466;
}

.home-page-header-text {
    text-decoration: none;
    font-size: 1.6em;
    color: #0067B8;
    font-weight: bold;
    cursor: pointer;
}

.home-page-content {
    display: flex;
    padding-top: 10px;
}

.home-page-content-text {
    color: #666;
}

.home-page-content-link {
    width: 50%;
    padding-right: 5px;
}

.home-page-content-link a {
    text-decoration: none;
    cursor: pointer;
}

.home-page-content-link a:hover {
    text-decoration: underline;
    color: #0176d3;
}


/* Home Page styles - end*/

/* Debug Content styles - start*/
.debug_content_section {
    margin: 10px 0px 5px 0px;
    color: #413c3c;
}

.debug-options-section {
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-evenly;
}

.debug-content-detail-section {
    border-radius: 2px; 
    border: 1px solid #ddd;
    padding: 5px 15px 15px 15px;
}

.accordion {
    display: flex;
    //cursor: pointer;
    margin-top: 10px;
    padding: 5px 10px 4px 0px;
    text-align: left;
    border: 1px solid #f1f1f1;
    //background-color: #e6e6e6;
    background-color: #f1f1f1;
    
    color: #444;
    //width: 100%;
    font-size: 15px;
    border-radius: 4px;
    //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.accordion:hover {
    outline: 0;
    border: 1px solid #c3c3c3;
    box-shadow: 0 0 3px #ddd;
}

.panel {
    padding: 0px 0px 10px 25px;
    //background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.workflow-panel-text {
    //word-break: break-word;
    padding: 6px 10px;
    border-right: 1px solid #ddd;
    min-width: 140px;
    text-align: center;
}

.workflow-panel-name {
    padding: 6px 10px;
    border-right: 1px solid #ddd;
    width: 100%;
}

.flow-panel-text {
    //word-break: break-word;
    padding: 6px 10px;
    border-right: 1px solid #ddd;
    min-width: 140px;
    text-align: center;
}

.flow-panel-name {
    padding: 6px 10px;
    width: 100%;
}

.workflow-panel-id {
    padding: 6px 10px;
    width: 130px;
    min-width: 130px;
}

.query-panel {
    display: flex;
    border: 1px solid #ddd;
    border-left: 4px solid #ddd;
    border-radius: 2px;
    margin: 5px 5px 0px 0px;
    //padding: 10px;
    font-size: 14px;
    color: gray;
}

.query-panel:hover {
    border: 1px solid #c3c3c3;
    border-left: 4px solid #c3c3c3;
}

.query-panel-text, .debug-panel-text {
    //word-break: break-word;
    padding: 6px 10px;
    border-right: 1px solid #ddd;
    min-width: 70px;
    text-align: center;
}

.query-panel-lineno, .debug-panel-lineno, .variable-assignment-panel-lineno {
    padding: 6px 10px;
    border-right: 1px solid #ddd;
    min-width: 50px;
    font-weight: bold;
    text-align: center;
}

.query-panel-object {
    padding: 6px 10px;
    border-right: 1px solid #ddd;
    //text-align: center;
    color: #1990b8;
    min-width: 250px;
    width: 250px;
    word-break: break-word;
    //font-weight: bold;
}

.query-panel-query {
    padding: 6px 10px;
    border-right: 1px solid #ddd;
    width: 100%;
}

.debug-panel-debug {
    padding: 6px 10px;
    //border-right: 1px solid #ddd;
    width: 100%;
}

.query-panel-rows {
    padding: 6px 10px;
    min-width: 50px;
    text-align: center;
}

.query-panel-detail {
    padding: 6px 10px;
    border-left: 1px solid #ddd;
}

.variable-assignment-panel-text {
    //word-break: break-word;
    padding: 6px 10px;
    border-right: 1px solid #ddd;
    width: 215px;
    text-align: center;
}

.variable-assignment-panel-name {
    padding: 6px 10px;
    border-right: 1px solid #ddd;
    width: 30%;
}

.variable-assignment-panel-value {
    padding: 6px 10px;
    width: 70%;
}

.email-queue-panel-text {
    //word-break: break-word;
    padding: 6px 10px;
    border-right: 1px solid #ddd;
    width: 130px;
    text-align: center;
}

.workflow-panel {
    padding: 5px 5px 0px 0px;
    font-size: 14px;
    color: gray;
}

.debug_content_file_upload {
    display: flex;
    color: #015ba7;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0px 0px 0px 15px;
    margin: 10px 0px;
    width: 140px;
    cursor: pointer;
}

.debug_content_file_upload:hover {
    outline: 0;
    box-shadow: 0 0 3px #ddd;
}

/*::file-selector-button {
    border: none;
    color: #032d60;
    padding: 5px 10px;
    margin: 10px 0px;
    background-color: #f4f4f4;
    cursor: pointer;
}*/

.debug_content_button {
    background-color: #1990b8;
    opacity: 0.8;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 8px 20px;
    cursor: pointer;
    margin: 10px 1px;

    float: right;
}

.debug_content_button:hover {
    background-color: #0176d3;
}

.debug-content-button-section {
    justify-self: right;
}

.debug-button-icon {
    width: 10px;
    padding: 0px 8px 1px 10px;
    opacity: 0.3;
}

.debug-button-icon:hover {
    opacity: 0.5;
}

.info-button-icon {
    width: 20px;
    opacity: 0.6;
}

.info-button-icon:hover {
    opacity: 0.4;
}

.search-panel {
    background: yellow;
    font-weight: bold;
}

/* Debug Content styles - end*/
.color-workflow {
    color: #0587b1;
}

.color-debug {
    color: #1b6204;
}

.color-query {
    color: #d14;
}

.color-variable-assignment {
    color: #0f5c75;
}

.color-success {
    color: green;
}

.color-exception {
    color: red;
}

.text-align-center {
    text-align: center;
}

.display-flex {
    display: flex;
}

.line-number-column-width {
    width: 65px;
    max-width: 65px;
}

.comp-name-column-width {
    width: 250px;
}

.method-name-column-width {
    width: 250px;
}

.row-count-column-width {
    width: 80px;
}
.info-column-width {
    width: 20px;
}

.word-break-all {
    word-break: break-all;
}

.extension-name-column-width {
    width: 300px;
    max-width: 300px;
}

.extension-name-column a {
    text-decoration: none;
    font-weight: bold;
    color: #032d60;
    cursor: pointer;
}

.extension-name-column a:hover {
    color: #0176d3;
}

.upload-file-icon {
    width: 40px; 
    //padding: 6px 0px 0px 0px; 
    opacity: 0.3;
    margin: 5px 0px 0px 0px;
}

.float-right {
    float: right;
}

.width-full {
    width: 100%;
}

.result-text {
    font-size: 14px;
    margin: 2px 0px -8px 0px;
    color: #413c3c;
}

.accordion-title-text {
    font-weight: bold;
    color: gray;
}

.line-number-text {
    border: 1px solid #2b262669;
    margin: 0px 6px;
    padding: 0px 6px;
    color: #506fcc;
    //background: #f1f1f1;
    background: #ffffff;
    border-radius: 4px;
    font-size: 15px;
}

.time-text {
    font-size: 14px;
    color: gray;
}

.spinner {
    width: 70px;
    height: 70px;
    animation: spin 8s linear infinite; /* very slow rotation */
    transform-origin: center;
}

.formatter-input {
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.formatter-input:focus {
    background-color: #ffffff;
    border: 1px solid #c3c3c3;
    outline: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}